<template>
  <div class="registerWrap">
    <div class="back">
      <a @click="$router.go(-1)">返回</a>
    </div>
    <div class="registerBox">
      <div class="stepClass">
        <el-steps :active="step" align-center>
          <el-step title="创建账户"></el-step>
          <el-step title="完善信息"></el-step>
        </el-steps>
      </div>
      <div v-if="step==1" class="creatAccount">
        <div class="inputBar">
          <label>
            <i>*</i>社交号：
          </label>
          <el-input
            class="el-input"
            v-model="form.chatCode"
            type="text"
            size="small"
            @blur="checkChatCodeFun"
          />
        </div>
        <div class="inputBar">
          <label>手机号：</label>
          <el-input class="el-input" v-model="form.telephone" type="text" size="small"/>
        </div>
        <div class="inputBar">
          <label>
            <i>*</i>密码：
          </label>
          <el-input class="el-input" v-model="form.password" type="password" size="small" @keyup.enter.native="nextStepFun"/>
        </div>
        <div class="inputBar">
          <label></label>
          <button class="nextStepFun" @click="nextStepFun">下一步</button>
        </div>
      </div>
      <div v-if="step==2" class="perfectInfo">
        <div class="inputBar">
          <label>头像：</label>
          <div class="imgBar" @click="selectFile">
            <img v-if="userHead" :src="userHead">
          </div>
          <input ref="hideFile" v-show="false" type="file" @change="uploadFile($event)">
        </div>
        <div class="inputBar">
          <label>用户名：</label>
          <el-input class="el-input" v-model="form.userName" type="text" size="small"/>
        </div>
        <div class="inputBar">
          <label>性别：</label>
          <el-radio v-model="form.sex" :label="0">男</el-radio>
          <el-radio v-model="form.sex" :label="1">女</el-radio>
        </div>
        <div class="inputBar">
          <label>地区：</label>
          <div class="select">
            <el-select class="el-select" v-model="form.province" placeholder="请选择省" size="small">
              <el-option
                v-for="item in provinceData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select class="el-select" v-model="form.city" placeholder="请选择市" size="small">
              <el-option
                v-for="item in cityData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="inputBar">
          <label>个人简介：</label>
          <el-input class="el-input" v-model="form.userProfile" type="textarea"/>
        </div>
        <div class="inputBar">
          <label></label>
          <button @click="perfectInfoFun">完成</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import api from "@/api/index.js";
export default {
  components: {},
  data() {
    return {
      step: 1,

      userHead: null, // 用户头像
      form: {
        headImg: null, // 用户头像传入数据库字段
        chatCode: null,
        telephone: null,
        password: null,
        userName: null,
        sex: 0,
        province: null,
        city: null,
        userProfile: null
      },
      sex: 0,
      province: null,
      city: null,
      provinceData: [{
        value: '江苏',
        label: '江苏'
      }, {
        value: '安徽',
        label: '安徽'
      }],
      cityData: [],
    };
  },
  mounted() { },
  methods: {
    // 注册
    nextStepFun() {
      const params = {
        chatCode: this.form.chatCode,
        telephone: this.form.telephone,
        password: this.form.password,
      }
      api.userRegister(params).then((res) => {
        if (res.data.code == 0) {
          this.step = 2;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    // 完善个人信息
    perfectInfoFun() {
      const params = {
        chatCode: this.form.chatCode,
        telephone: this.form.telephone,
        userName: this.form.userName,
        sex: this.form.sex,
        headImg: this.form.headImg,
        userProfile: this.form.userProfile,
        province: this.form.province,
        city: this.form.city
      }
      api.userUpdateUserInfo(params).then((res) => {
        if (res.data.code == 0) {
          this.$router.go(-1);
        }
      })
    },
    selectFile() {
      this.$refs.hideFile.click();
    },
    uploadFile(event) {
      const file = event.target.files[0];
      api.commonUpload(file).then((res) => {
        const result = res.data;
        this.userHead = result.data.base + result.data.url;
        this.form.headImg = result.data.url;
      })
    },
    checkChatCodeFun() {
      const params = {
        chatCode: this.form.chatCode
      }
      api.userFindUserDetail(params).then((res) => {
        if (res.data.code == 0) {
          if (res.data.data) {
            this.form.chatCode = null;
            this.$message.error(res.data.message);
            return;
          }
        }
      })
    }
  },
  watch: {
    "form.province"(newValue, oldValue) {
      if (newValue == '江苏') {
        this.cityData = [{
          value: '南京',
          label: '南京'
        }, {
          value: '苏州',
          label: '苏州'
        }]
      }
      if (newValue == '安徽') {
        this.cityData = [{
          value: '合肥',
          label: '合肥'
        }, {
          value: '蚌埠',
          label: '蚌埠'
        }]
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.registerWrap {
  .back {
    padding: 20px;
    font-size: 14px;
    > a {
      color: #557ea2;
      cursor: pointer;
    }
  }
  .registerBox {
    margin: 80px auto;
    width: 330px;
    .stepClass {
      margin-bottom: 80px;
    }
    .inputBar {
      margin: 20px 0;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: "Microsoft yahei";
      > label {
        width: 75px;
        text-align: right;
        color: #666;
        > i {
          color: red;
          margin-right: 5px;
        }
      }
      .imgBar {
        width: 50px;
        height: 50px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .el-input {
        flex: 1;
      }
      .select {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .el-select {
          flex: 0.48;
        }
      }
      > button {
        flex: 1;
        height: 35px;
        border-radius: 4px;
        border: 1px solid #478ce2;
        background: #478ce2;
        color: #fff;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>